<template>
  <el-menu class="menu-box" :router="false" :default-active="active" :unique-opened="true" @select="handeSelect"
    @open="handleOpen" @close="handleClose">
    <MenuItem v-for="items in  menuList" :item="items" >
    </MenuItem>
  </el-menu>
</template>

<script setup lang="ts" name="">
import MenuItem from "/@/layouts/default/menus/item/index.vue"
import {useAddRouteStore, useRoutingTagStore, useMenuStore } from "/@/store/index";
import { useRouter } from "vue-router";

const router = useRouter();

useMenuStore().menuRecursion((useAddRouteStore().whiteList))

const menuList = computed(() => useMenuStore().menuList);

// 初始化侧边菜单栏active
const active = computed(()=>useRoutingTagStore().active.name);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 侧边菜单点击事件
const handeSelect = (key: string, keyPath: string[]) => {
  if (active.value != key) {
    router.push({name:key});
  }
};
</script>

<style scoped lang="less">

</style>